<template>
  <div id="app">
    <div class="container">
      <my-header @search="search"></my-header>
      <!-- <my-content :searchData="searchData"
                  :isLoading="isLoading"
                  :isFirst="isFirst"
                  :errorMsg="errorMsg"></my-content> -->
      <my-content :searchObj="searchObj"></my-content>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
import MyHeader from "./components/MyHeader.vue"
import MyContent from "./components/MyContent.vue"
export default {
  name: 'App',
  components: {
    MyHeader,
    MyContent
  },
  data () {
    return {
      searchObj: {
        // 搜索数据
        searchData: [],
        // 是否是第一次请求
        isFirst: true,
        // 正在加载中
        isLoading: false,
        // 请求出错
        errorMsg: ''
      }
    }
  },
  methods: {
    search (val) {
      // 1.点击搜索后，发送请求前
      // 一.普通写法
      // this.isFirst = false;
      // this.isLoading = true;
      // this.errorMsg = '';
      // this.searchData = []
      // 二.对象
      this.searchObj.isFirst = false;
      this.searchObj.isLoading = true;
      this.searchObj.errorMsg = '';
      this.searchObj.searchData = []
      axios({
        methods: 'get',
        url: 'https://api.github.com/search/users',
        params: {
          q: val
        }
      }).then((res) => {
        console.log(res);
        // 2.请求成功后
        // this.searchData = res.data.items;
        // this.isLoading = false;
        // this.errorMsg = '';
        this.searchObj.isLoading = false;
        this.searchObj.errorMsg = '';
        this.searchObj.searchData = res.data.items;
      }).catch((err) => {
        console.log(err.message);
        // 2.请求失败后
        // this.searchData = [];
        // this.isLoading = false;
        // this.errorMsg = err.message;
        this.searchObj.isLoading = false;
        this.searchObj.errorMsg = err.message;
        this.searchObj.searchData = [];
      })
      // 另外一种传参方式
      // axios.get(\`https://api.github.com/search/users?q=${this.keyWord}\`)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/* .album {
  min-height: 50rem; 
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
} */
</style>
